iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 24
0
Modern Web

Angular初期筆記系列 第 24

DAY24-Angular6之Array 說明

  • 分享至 

  • xImage
  •  

基本說明

當把資料接收回來,就應該要開始處理他們了, JS 世界中較常遇到的資料有

  • Json
  • Object
  • Array

Json

在JS中是以字串格式呈現,花括號( { } )內用雙引號( " )包覆每個字,再用單引號( ' )包覆
把 單引號( ' ) 移除,你會發現 Json 和物件非常相似,只差別在於雙引號( " ),故兩者是可以轉換的!
Json 用於資料交換,再後續介紹到 HttpClient ,就會再跟大家見面了

Object(物件)

Key/Value 呈現

Json & Object

JSON.parse(Json):Json 轉為 Object
JSON.stringify(Object):Object 轉為 Json

src\app\app.component.ts
-----
jsonData = '{"name":"poychuang","age":"24"}' ; //Json
objectData = {name:'poychuang',age:24}; //Object

Array

一個串接一個,使用 , 分隔

src\app\app.component.ts
-----
stringArray = ['hello', 'holla', 'ha', 'hi', 'hu'];
jsonData = '{"name":"poychuang","age":"24"}';

既然傳送資料是使用 Json ,為何要先介紹 Array ,因為大部分的資料都是一組定義好的相同資料,像是上面的 jsonData ,而系統會有很多人 Key in ,最簡單的紀錄方式就是用陣列去串,既然資料在陣列中,自然就先要了解 陣列如何使用!

在了解 Array 前,說個在面試被考到的題目:說明深拷貝和淺拷貝的不同
深拷貝:複製出來的物件是全新的物件
淺拷貝:複製出來的物件是參照的物件

就像是郵局的戶頭有10,000元(代號:A)
深拷貝:複製出來的物件像是郵局戶頭(代號:B),刷1,000元
A剩 10,000元;B剩9,000元
淺拷貝:複製出來的物件像是提款卡(代號:C),刷1,000元
A剩9,000元;C剩9,000元

簡短 Array 用法說明

Array.prototype.concat()

  • 用途
    合併陣列
  • 語法
    var new_array = old_array.concat(value1[, value2[, ...[, valueN]]])
  • 回傳
    新的陣列(深拷貝)

Array.isArray()

  • 用途
    判別是否為陣列
  • 語法
    Array.isArray(obj)
  • 回傳
    boolean (true/false)

Array.prototype.filter()

  • 用途
    判別每個值是否符合檢驗式
  • 語法
    var newArray = arr.filter(callback[, thisArg])
  • 回傳
    新的陣列,符合上述檢驗式(深拷貝)

Array.prototype.find()

  • 用途
    判別每個值是否符合檢驗式,直到找到第一個符合的值
  • 語法
    arr.find(callback[, thisArg])
  • 回傳
    檢驗式?通過的值 : undefined

Array.prototype.findIndex()

  • 用途
    判別每個值是否符合檢驗式,直到找到第一個符合的值,回傳其陣列的索引值
  • 語法
    arr.findIndex(callback[, thisArg])
  • 回傳
    檢驗式?回傳的索引值 : -1

Array.prototype.forEach()

  • 用途
    將陣列每個值都帶進 函式
  • 語法
    arr.forEach(function callback(currentValue[, index[, array]]) {//你的程式碼}[, thisArg]);
  • 回傳
    undefined

Array.prototype.map()

  • 用途
    將陣列的每個值都帶進 函式,並回傳出新的值,再組成新的陣列
  • 語法
    var new_array = arr.map(function callback(currentValue[, index[, array]]) {// Return element for new_array}[, thisArg])
  • 回傳
    新的陣列,通過函式(深拷貝)

Array.prototype.push()

  • 用途
    添加新的值到陣列末端
  • 語法
    arr.push(element1[, ...[, elementN]])
  • 回傳
    陣列的length

Array.prototype.splice()

  • 用途
    添加新的值到陣列末端
  • 語法
    array.splice(start[, deleteCount[, item1[, item2[, ...]]]])
    start:起始位置
    deleteCount:刪除幾個陣列值
    item1...:添加新的陣列值
  • 回傳
    被刪除的值組成新陣列

參考來源

https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/Array


上一篇
DAY23-Angular6之路由-再上一層樓
下一篇
DAY25-Angular6之Array 彙整表
系列文
Angular初期筆記30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言